<template>
  <!-- 表情展示框 -->
  <div class="emoji_box" @mousedown.prevent="()=>{}">
    <div class="static_popup common_font" style="width: 380px">
      <div class="close_btn" @click.stop="close">
        <i class="iconfont icon-guanbi"></i>
      </div>
      <div class="title">
        <span>表情</span>
      </div>
      <div class="content_ctnr">
        <div
          class="emoji_page"
          @mouseenter="emojiBoxMouseenterCB"
          @mouseleave="emojiBoxMouseleaveCB"
          ref="box"
        >
          <ul
            class="emoji_list"
            ref="emojiBox"
            :style="{ top: `${emojiBoxTop}px` }"
          >
            <li
              class="emoji"
              :class="item.text ? 'emoji_text' : 'emoji_pic'"
              v-for="item in currentEmojiList"
              @click.stop="inputEmoji(item)"
            >
              {{ item.text }}
              <div
                v-if="item.imgUrl"
                :style="{
                  'background-image': `url(${item.imgUrl})`,
                  'background-size': 'cover',
                  width: '100%',
                  height: '100%',
                }"
              ></div>
            </li>
          </ul>
          <div class="ps_rail_y" v-show="canScroll" ref="scrollbar">
            <div
              class="ps_thumb_y"
              @mousedown="scrollmousedownCB"
              @mousemove="scrollmousemoveCB"
              @mouseleave="scrollmouseupCB"
              @mouseup="scrollmouseupCB"
              ref="scroll"
              :style="{ top: `${scrollTop}px` }"
            ></div>
          </div>
        </div>
        <div class="pagination" v-if="emojiList">
          <ul class="emoji_cover_list">
            <li
              class="emoji_cover"
              v-for="(item, index) in emojiList"
              :class="actTab == index ? 'selected' : ''"
              @click.stop="switchTab(index, item.emojis)"
            >
              <div
                :style="{
                  'background-image': `url(${item.imgUrl})`,
                  'background-size': 'cover',
                  width: '100%',
                  height: '100%',
                }"
              ></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EMOJILIST from "../../static/emoji.js";
export default {
  data() {
    return {
      emojiList: EMOJILIST,
      currentEmojiList: [],
      actTab: 0,
      emojiBoxTop: 0,
      scrollTop: 0,
      isscrollmousedown: false,
      $scrollbar: null, //滚动框对象
      $scroll: null, //滚动条对象
      $emojiBox: null, //表情列表对象
      $box: null,
      boxHeight: 0,
      emojiBoxHeight: 0, //表情列表高度
      scrollbarHeight: 0, //滚动框高度
      scrollHeight: 0, //滚动条长度
      scrollMoveHeight: 0, //滚动条可滚动长度
      scrollTop: 0, //滚动条顶部距离
      lastScrollClientY: 0, //上一次移动的y坐标
      emojiBoxMoveHeight: 0, //列表可动区域
      emojiBoxTop: 0, //列表上偏移
    };
  },
  mounted() {
    this.getEmojiList();
    this.$nextTick(() => {
      this.$scrollbar = this.$refs.scrollbar;
      this.$scroll = this.$refs.scroll;
      this.$box = this.$refs.box;
      this.$emojiBox = this.$refs.emojiBox;
      this.getInitHeight();
      this.$box.addEventListener("mousewheel", this.emojiBoxMousewheelCB);
    });
  },
  methods: {
    close() {
      this.$emit("close");
    },
    // 获取表情数据列表
    getEmojiList() {
      this.currentEmojiList = this.emojiList[0].emojis;
    },
    // 阻止页面滚动
    preventScrollFn: (event) => {
      event.returnValue = false;
    },
    // 文档事件监听
    documentBindFn(eventType, fn, obj = {}) {
      document.addEventListener(eventType, fn, obj);
    },
    // 解除页面滚动
    documentUnbindFn(eventType, fn, obj = {}) {
      document.removeEventListener(eventType, fn, obj);
    },
    // 表情框鼠标移入回调
    emojiBoxMouseenterCB() {
      this.documentUnbindFn("mousewheel", this.preventScrollFn, {
        passive: false,
      });
      this.documentBindFn("mousewheel", this.preventScrollFn, {
        passive: false,
      });
    },
    // 表情框鼠标移出回调
    emojiBoxMouseleaveCB() {
      this.documentUnbindFn("mousewheel", this.preventScrollFn, {
        passive: false,
      });
    },
    // 表情框鼠标滚轮回调
    emojiBoxMousewheelCB(e) {
      if (this.isscrollmousedown) return;
      if (e.deltaY > 0) {
        this.emojiBoxTop -= this.boxHeight;
        if (this.emojiBoxTop <= -this.emojiBoxMoveHeight) {
          this.emojiBoxTop = -this.emojiBoxMoveHeight;
        }
        this.scrollTop =
          (-this.emojiBoxTop / this.emojiBoxMoveHeight) * this.scrollMoveHeight;
      } else {
        // console.log("向上滚动")
        this.emojiBoxTop += this.boxHeight;
        if (this.emojiBoxTop >= 0) {
          this.emojiBoxTop = 0;
        }
        this.scrollTop =
          (-this.emojiBoxTop / this.emojiBoxMoveHeight) * this.scrollMoveHeight;
      }
    },
    // 滚动条鼠标点下回调
    scrollmousedownCB(e) {
      this.isscrollmousedown = true;
      /* 获取鼠标初始点击位置 */
      this.lastScrollClientY = e.clientY;
    },
    // 滚动条鼠标移动回调
    scrollmousemoveCB(e) {
      if (!this.isscrollmousedown) return;
      this.scrollTop += e.clientY - this.lastScrollClientY;
      this.emojiBoxTop -=
        (e.clientY - this.lastScrollClientY) *
        (this.emojiBoxMoveHeight / this.scrollMoveHeight);
      this.lastScrollClientY = e.clientY;
      if (this.scrollTop >= this.scrollMoveHeight) {
        this.scrollTop = this.scrollMoveHeight;
      } else if (this.scrollTop <= 0) {
        this.scrollTop = 0;
      }
      if (this.emojiBoxTop >= 0) {
        this.emojiBoxTop = 0;
      } else if (this.emojiBoxTop <= -this.emojiBoxMoveHeight) {
        this.emojiBoxTop = -this.emojiBoxMoveHeight;
      }
    },
    // 滚动条鼠标抬起回调
    scrollmouseupCB() {
      this.isscrollmousedown = false;
    },
    // 切换表情框
    switchTab(index, currentEmojiList) {
      this.actTab = index;
      this.currentEmojiList = currentEmojiList;
      this.scrollTop = 0;
      this.emojiBoxTop = 0;
      this.getInitHeight();
      this.$emit("inputBoxFocus");
    },
    // 获取表情框高度、滚动条高度、
    getInitHeight() {
      this.$nextTick(() => {
        this.emojiBoxHeight = this.$emojiBox.offsetHeight;
        this.boxHeight = this.$box.offsetHeight;
        if (this.boxHeight < this.emojiBoxHeight) {
          this.emojiBoxMoveHeight = this.emojiBoxHeight - this.boxHeight;
        } else {
          this.emojiBoxMoveHeight = 0;
        }
        this.scrollbarHeight = this.$scrollbar.offsetHeight;
        this.scrollHeight = this.$scroll.offsetHeight;
        this.scrollMoveHeight = this.scrollbarHeight - this.scrollHeight;
      });
    },
    inputEmoji(emoji) {
      this.$emit("inputEmoji", emoji);
      this.$emit("inputBoxFocus");
    },
  },
  computed: {
    canScroll() {
      return this.currentEmojiList.length > 18;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  list-style: none;
  padding: 0;
  margin: 0;
  .static_popup {
    display: inline-block;
    position: relative;
    background-color: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.17);
    opacity: 1;
    margin-top: 0;
    z-index: 10;
  }
  .common_font {
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
      Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
    font-size: 14px;
  }
}
.emoji_box {
  cursor: default;
  position: absolute !important;
  left: 0px;
  top: 23px;
  z-index: 9;
  &::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px 0 0 0;
    left: 26px;
    top: -3px;
    transform: rotate(45deg);
    background-color: #fff;
    box-shadow: 1px 1px 4px rgba(83, 83, 83, 0.384);
    z-index: 11;
  }
  &::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 10px;
    left: 20px;
    top: 1px;
    background-color: #ffffff;
    z-index: 11;
  }
  .title {
    padding: 15px;
    font-size: 14px;
    color: #222;
    text-align: left;
  }
  .close_btn {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #999999;
    cursor: pointer;
  }
  .content_ctnr {
    .emoji_page {
      position: relative;
      height: 200px;
      padding: 0 15px;
      overflow: hidden;
      .emoji_list {
        padding: 0;
        position: absolute;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .emoji {
          margin: 0 0 12px 12px;
          padding: 3px;
          line-height: 38px;
          float: left;
          box-sizing: border-box;
          cursor: pointer;
          font-size: 12px;
          transition: background-color 0.2s ease;
          &:hover {
            background-color: #f3f5f7;
          }
        }
        .emoji_pic {
          width: 38px;
          height: 38px;
        }
        .emoji_text {
          font-size: 12px;
          line-height: 22px;
        }
      }
      .ps_rail_y {
        position: absolute;
        top: 0;
        right: 0;
        width: 15px;
        height: 200px;
        background-color: transparent;
        transition: background-color 0.2s linear, opacity 0.2s linear;
        &:hover {
          opacity: 0.9;
          background-color: #eee;
        }
        &:hover > .ps_thumb_y,
        &:focus > .ps_thumb_y {
          background-color: #999;
          width: 11px;
        }
        .ps_thumb_y {
          position: absolute;
          right: 2px;
          width: 6px;
          height: 50px;
          background-color: #ccc;
          border-radius: 6px;
          transition: background-color 0.2s linear 0s, width 0.2s ease-in-out;
        }
      }
    }
    .pagination {
      height: 36px;
      width: 100%;
      background-color: #f4f4f4;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      overflow: hidden;
      .emoji_cover_list {
        display: flex;
        flex-direction: row;
        align-items: center;
        .emoji_cover {
          height: 36px;
          min-width: 54px;
          margin: 0;
          padding: 6px 15px;
          box-sizing: border-box;
          cursor: pointer;
        }
        .selected {
          border-bottom-right-radius: 5px;
          border-bottom-left-radius: 5px;
          background-color: #fff;
        }
      }
    }
  }
}
</style>